<template>
  <view class="box">
    <!-- 步骤条 -->
    <view class="set">
      <view :class="item.done ? 'set-1' : 'set-2'" :key="index" v-for="(item, index) in options">
        <text :class="item.done ? 'set1-test' : 'set2-test'">{{ item.title }}</text>
        <view class="set-view" @click="navToTopicInfo(item, index)">
          <view class="set-view-text">{{ item.content }}</view>
          <image class="set-view-img" :src="item.img" mode="aspectFill" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    options: Array, // 数据
  },
  methods: {
    // 传过去整个阶段对象了
    navToTopicInfo: function (item, index) {
      console.log(index)
      if (index === 2) {
        uni.navigateTo({
          url: '/pages-sub/myCertificate/certificateStage3',
        })
      } else if (item.done === true && index !== 2) {
        uni.navigateTo({
          url:
            '/pages-sub/trainTopic/trainTopicInfo2?data=' +
            encodeURIComponent(JSON.stringify(item)),
        })
      }
    },
  },
}
const navToTopicInfo = (data) => {}
</script>

<style lang="scss" scoped>
.box {
  margin-left: 40rpx;
}
.set-2:last-child::after {
  display: none;
}
.set2-test {
  color: #79829f;
  margin-left: -40rpx;
  font-size: 27rpx;
}

.set-1:last-child::after {
  display: none;
}
.set1-test {
  color: #ffffff;
  margin-left: -40rpx;
  font-size: 27rpx;
}
.set {
  margin: 30rpx;
}

.set-1 {
  height: 250rpx;
  border-radius: 10upx;
  width: 520rpx;
  margin-left: 100upx;
  position: relative;
  .set-view {
    display: flex;
    width: 520rpx;
    height: 160rpx;
    justify-content: space-between;
    align-items: center;
    background: url(https://grundfos.elearningcn.com/wxfile/v1/icons/newUser/conten.png) no-repeat;
    background-size: 520rpx 160rpx;
    .set-view-text {
      width: 300rpx;
      font-size: 24rpx;
      margin-left: 20rpx;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.5;
    }
    .set-view-img {
      margin-right: 10rpx;
      width: 160rpx;
      height: 140rpx;
    }
  }
}

.set-1::after {
  content: ''; /* 必须存在如果没有图标就留空 */
  top: 20%; /* 定位 距离*/
  border-style: dotted;
  border-left: 1px; /* 横线颜色 */
  border-color: #ffffff;
  left: -82upx; /* 定位 距离*/
  height: 75%; /* 高度 */
  position: absolute; /* 定位 */
}

.set-1::before {
  content: ''; /* 必须存在如果没有图标就留空 */
  background: url(https://grundfos.elearningcn.com/wxfile/v1/icons/newUser/icon_circle.png)
    no-repeat;
  background-size: 33rpx 33rpx;
  width: 33rpx;
  height: 33rpx;
  position: absolute; /* 定位 */
  top: 8rpx;
  left: -95rpx; /* 移动到左边 */
  font-weight: bold; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
  font-family: 'iconfont' !important; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
  font-size: 54upx; /* 图标大小 */
  font-style: normal; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
  -webkit-font-smoothing: antialiased; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
  -moz-osx-font-smoothing: grayscale; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
}

.set-2 {
  height: 250rpx;
  border-radius: 10upx;
  width: 520rpx;
  margin-left: 100upx;
  position: relative;
  .set-view {
    display: flex;
    width: 520rpx;
    height: 160rpx;
    justify-content: space-between;
    align-items: center;
    background: url(https://grundfos.elearningcn.com/wxfile/v1/icons/newUser/conten.png) no-repeat;
    background-size: 520rpx 160rpx;
    .set-view-text {
      width: 300rpx;
      font-size: 24rpx;
      margin-left: 20rpx;
      color: #79829f;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.5;
    }
    .set-view-img {
      margin-right: 10rpx;
      width: 160rpx;
      height: 140rpx;
    }
  }
}

.set-2::after {
  content: ''; /* 必须存在如果没有图标就留空 */
  top: 20%; /* 定位 距离*/
  border-style: dotted;
  border-left: 1px; /* 横线颜色 */
  border-color: #ffffff;
  left: -82upx; /* 定位 距离*/
  height: 75%; /* 高度 */
  position: absolute; /* 定位 */
}

.set-2::before {
  content: ''; /* 必须存在如果没有图标就留空 */
  background: url(https://grundfos.elearningcn.com/wxfile/v1/icons/newUser/icon_lock.png) no-repeat;
  background-size: 33rpx 33rpx;
  width: 33rpx;
  height: 33rpx;
  position: absolute; /* 定位 */
  top: 8rpx;
  left: -95rpx; /* 移动到左边 */
  font-weight: bold; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
  font-family: 'iconfont' !important; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
  font-size: 54upx; /* 图标大小 */
  font-style: normal; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
  -webkit-font-smoothing: antialiased; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
  -moz-osx-font-smoothing: grayscale; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
}
</style>
